<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="code-editor">
  <zeppelin-code-editor
    (nzEditorInitialized)="onEditorInit($event)"
    [nzEditorOption]="{
    language: 'html' ,
    minimap: {
    enabled: false
    }
  }">
  </zeppelin-code-editor>
</div>
<div class="messages">

  <div class="fix-bar">
    <button nz-button
            [disabled]="(messageDetails.length - errorCount) === 0"
            class="fix-btn"
            nzSize="small"
            nzType="link"
            (click)="fix()">
      Quick Fix
    </button>
    <span class="log-counts">
      <span>
        <i nz-icon class="error" nzType="stop" nzTheme="outline"></i>
        {{errorCount}}
      </span>
       <span>
        <i nz-icon class="close" nzType="issues-close" nzTheme="outline"></i>
         {{messageDetails.length - errorCount}}
      </span>
    </span>
  </div>

  <div class="message"
       (click)="scrollToLine(item)"
       *ngFor="let item of messageDetails">
    <i *ngIf="item.level === 0" nz-icon class="error" nzType="stop" nzTheme="outline"></i>
    <i *ngIf="item.level === 2" nz-icon class="close" nzType="issues-close" nzTheme="outline"></i>
    <span class="position"> ({{(item.pos.line + 1) + ',' + (item.pos.character + 1)}})</span>
    {{item.message}}
    <a *ngIf="item.url" [href]="item.url" target="_blank">more</a>
  </div>
</div>

<div *nzModalFooter>
  <button nz-button (click)="cancel()">Cancel</button>
  <button nz-button
          nzType="primary"
          [disabled]="this.messageDetails.length"
          (click)="updateAndCopy()">
    Update and Copy
  </button>
</div>
